<template>
    <el-row class="cdetail-row">
        <el-col :span="24">
            <el-card class="box-card tinfo-head-box">
                <div slot="header" class="clearfix">
                    <div class="tinfo-title-header-box" style="background-image:url('/static/img/illustration/i004.jpg')">
                    </div>
                </div>
                <el-row class="user-title-row">
                    <el-col :span="24">
                        <div class="T-name-box" style="text-align: center;display: block;width: 100%;margin:0 0 10px">
                            <h3 style="text-align: center;">图书搜索</h3>
                        </div>
                        <div class="T-name-box" style="display: block;width: 80%;margin:0 auto 0;float:none">
                            <el-input placeholder="请输入你要搜索的图书名称" v-model="search" class="input-with-select">
                                <el-select v-model="select" slot="prepend" placeholder="请选择" style="width:120px">
                                    <el-option label="广州图书馆" value="1"></el-option>
                                    <el-option label="广商图书馆" value="2"></el-option>
                                </el-select>
                                <el-button slot="append" icon="el-icon-search" @click="searchBookData"></el-button>
                            </el-input>
                        </div>
                        <div class="clear"></div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>图书目录</span>
                </div>
                <template v-loading="isLoading"
                          element-loading-text="拼命加载中"
                          element-loading-spinner="el-icon-loading"
                          element-loading-background="rgba(0, 0, 0, 0.8)"
                          v-if="!isLoading && datas.length>0">
                    <div class="bookList-box" v-for="(data,index) in datas">
                        <h3><i class="el-icon-star-off"></i>{{data.bookName}}</h3>
                        <div class="library-listContent">
                            <div class="buyBook-box">
                                <span>网络购书中心：</span>
                                <a v-for="buyData in data.bookBuyUrl" :href="buyData" target="_blank">
                                    {{buyData | filterBuyType}}
                                </a>
                            </div>
                            <div class="bookIntro-box">
                                <p>简介：{{data.bookIntro || '暂无简介。'}}</p>
                            </div>
                        </div>
                        <div class="library-listFooter">
                            <span>作者：{{data.bookAuthor || '未知'}}</span>
                            <span>{{data.bookPubInfo}}</span>
                            <span class="clear"></span>
                        </div>
                        <!--{{data}}-->
                    </div>
                </template>
                <el-col v-if="datas.length === 0" :span="24">
                    <p class="no-data-box" v-show="search===''">
                        <span>输入你要搜索的图书</span>
                    </p>
                    <p class="no-data-box" v-show="search!==''">
                        <span>暂无图书数据</span>
                        <span>正再尝试获取数据，请您稍后再刷新试试</span>
                    </p>
                </el-col>
                <!--工具条-->
                <el-col v-if="datas.length > 0" :span="24" class="toolbar">
                    <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
                    </el-pagination>
                </el-col>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
  import {getSearchBook} from '../../api/api';
  export default {
    data() {
      return {
        select: '1',
        total:'',
        page: 0,
        search:'',
        datas:[],
        isLoading: true,
        lastSearch: '',
      };
    },
    filters:{
      filterBuyType:function (val) {
        if(val.search('jd.com') !== -1){
          return '京东';
        }else if(val.search('tmall.com') !== -1){
          return '天猫';
        }else if(val.search('dangdang.com') !== -1){
          return '当当网';
        }else if(val.search('taobao.com') !== -1){
          return '淘宝';
        }else if(val.search('amazon.cn') !== -1){
          return '亚马逊';
        }
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val;
        this.getData(this.search,this.select);
      },

      searchBookData:function () {
        if(this.search !== this.lastSearch){
          this.lastSearch = this.search
          this.$router.push({path:'/library?s='+this.search+'&t='+this.select});
          this.getData(this.search,this.select);
        }
      },

      getData(val1,val2) {
        let para = {
          count: 10,
          pageNo: this.page,
          sortDirection: 'asc',
          sortField: ["bookName"],
          bookName: val1,
          bookOrigin: '',
        };
        if(val2 === '1' || val2 ===1){
          para.bookOrigin = '广州图书馆';
        }else if(val2 === '2' || val === 2){
          para.bookOrigin = '广商图书馆';
        }else{
          para.bookOrigin = '广州图书馆';
        }
        console.log(para);
        getSearchBook(para).then((res) => {
          console.log(res.data.data.content);
          this.total = res.data.data.totalPages;
          this.datas = res.data.data.content;
          this.isLoading = false;
        });
      },
    },

    mounted: function () {
      function GetRequest() {
        let url = decodeURI(location.search);
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
          let str = url.substr(1);
          let strs = str.split("&");
          for(let i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
          }
        }
        return theRequest;
      }
      let urlData = GetRequest();

      let user = sessionStorage.getItem('user');

      this.isLoading = true;

      this.lastSearch = urlData.s


      if(urlData.s && urlData.t){
        console.log(urlData.t)
        if(urlData.s === '' && urlData.t !== '' ){
          this.datas = [];
          this.isLoading = false;
        }else if(urlData.s !== '' && urlData.t !== '' ){
          console.log(urlData.t);
          this.search = urlData.s;
          this.select = urlData.t;
          this.getData(urlData.s,urlData.t);
        }
      }
    }
  };
</script>